<template>
  <div class="newmusic">
    <!-- newmusic的头部 -->
    <div class="newmusic-top">
      <el-button round :class="isshow?'active':''" @click="active1">新歌速递</el-button>
      <el-button round :class="!isshow?'active':''" @click="active2">新歌上架</el-button>
    </div>
    <!-- newmusic的切换选项 -->
    <div class="newmusic-tab">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="华语" name="7"></el-tab-pane>
        <el-tab-pane label="欧美" name="96"></el-tab-pane>
        <el-tab-pane label="韩国" name="16"></el-tab-pane>
        <el-tab-pane label="日本" name="8"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- newmusic的表格 -->
    <div class="newmusic-table">
      <el-table ref="singleTable" :data="tableData" :show-header="false" highlight-current-row
        @current-change="handleCurrentChange" style="width:100%"  :cell-style="{ textAlign: 'center' }"
        v-loading="pictLoading" element-loading-background="rgba(0, 0, 0, 0.5)"
         element-loading-text="图标正在加载中">
        <el-table-column type="index" width="50">
        </el-table-column>
        <el-table-column property="artists" label="作者" width="120" v-if="isshow">
          <template slot-scope="scope">
            <div>
              <!-- {{ scope.row.artists[0].picUrl }} -->
              <!-- v-if='scope.row.album' -->
              <img style="width:80xp;height:80px" :src="scope.row.album.picUrl" alt="">
            </div>
          </template>
        </el-table-column>
        <!-- 新歌速递 -->
        <el-table-column width="120" v-else>
          <template slot-scope="scope">
            <div class="imgStyle">
              <img style="width:80xp;height:80px" :src="scope.row.blurPicUrl" alt="" />
            </div>
          </template>
        </el-table-column>


        <el-table-column property="name" label="歌名" width="120">
        </el-table-column>
        <el-table-column property="artists" label="作者" width="300" v-if="isshow">
          <template slot-scope="scope">
            <div>
              {{ scope.row.album.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column property="artists" label="作者" width="300" v-else>
          <template slot-scope="scope">
            <div>
              {{ scope.row.name }}
            </div>
          </template>
        </el-table-column>

        <!-- 时间戳的处理 time -->
         <el-table-column property="artists" label="播放时间" v-if="isshow">
          <template slot-scope="scope">
            <div>
              {{ scope.row.bMusic.playTime |formatTime1 }}
            </div>
          </template>
        </el-table-column>

           <!-- 新歌上架  新歌的发布时间 newtime -->
         <el-table-column property="artists" label="播放时间" v-else>
          <template slot-scope="scope">
            <div>
              {{ scope.row.publishTime|formatYear }}
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    getnewmusicSpace,
    getnewmusicUp
  } from "@/network/newmusic.js"
  import {formatTime,formatPublishTime} from "@/common/common.js"
  export default {
    name: "Newmusic",
    data() {
      return {
        pictLoading:false,
        isshow: true,
        tab: 0,
        activeName: '0',
        tableData: [],
      };
    },
    created() {
      this.getnewmusicSpace1(0)
    },
    filters: {
      formatTime1: function (val) {
        const tiem = formatTime(val)
        return tiem
      },
      formatYear:function(val) {
        const year =formatPublishTime(val)
        return year
      }
    },
    methods: {
      // 获取新歌速递的内容 
      getnewmusicSpace1(type) {
        this.pictLoading=true
        this.tableData=[]
        getnewmusicSpace("/top/song", {
          type: type
        }).then(res => {
          this.pictLoading=false
          const a = res.data.splice(0, 10)
          // console.log(res.data);
          // console.log(a);
           console.log(a[0].album );
          if(a[0].album){
             this.tableData = a
          }
         
          console.log(a);
         
        })
      },
      // 获取新歌sahngjia的内容 
      getnewmusicUp1(area) {
           this.pictLoading=true
        this.tableData=[]
        getnewmusicUp("/top/album", {
          area: area
        }).then(res => {
          // console.log(res);
          this.pictLoading=false
          const b = res.monthData.splice(0, 10)
          this.tableData = b
          console.log(b);
        })
      },
      //点击切换  速递 和 新歌和新歌上架
      active1() {
        this.isshow = true,
          this.activeName = "0",
          this.getnewmusicSpace1(0)
      },
      // area为的值
      //  ALL：全部
      // JP：日本
      // KR：韩国
      // ZH：中国
      // EA：欧美
      active2() {
        this.isshow = false
        this.getnewmusicUp1("ZH")
        this.activeName = "0"
      },
      handleClick(tab) {

        if (this.isshow) {
          //新歌速递
          console.log(tab.name);
          const types = tab.name * 1;
          this.getnewmusicSpace1(types);
          // console.log(tab.name);
        } else {
          //新歌上架
          // console.log(tab.name);
          switch (tab.name) {
            case "0":
              this.getnewmusicUp1("ALL");
              break;
            case "7":
              this.getnewmusicUp1("ZH");
              break;
            case "16":
              this.getnewmusicUp1("KR");
              break;
            case "96":
              this.getnewmusicUp1("EA");
              break;
            case "8":
              this.getnewmusicUp1("JP");
              break;
          }
        }
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    }
  }
</script>

<style scoped lang="less">


  .newmusic {
    .newmusic-top {
      width: 255px;
      margin: 0 auto;

      .active {
        background-color: skyblue;
        color: #fff;
      }
    }

    .newmusic-table {
      cursor: pointer;
    }
  }
</style>